<template>
  <div id="noticeInfo">
    <!--课程详情-->
    <!--面包屑导航-->
    <div class="breadcrumbBox clearFloat">
      <div class="lf">当前位置：</div>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="lf">
        <!--<el-breadcrumb-item :to="{ path: '/' }">热点专题</el-breadcrumb-item>-->
        <el-breadcrumb-item>课程详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--标题等-->
    <div class="titleBox">
      <p>{{info.courseName}}</p>
      <div class="otherList clearFloat">
        <div class="lf coinDiv">
          <i class="el-icon-coin lf"></i>
          <span class="lf">{{info.integral}}积分</span>
          <span class="lf">{{info.period}}学时</span>
        </div>
        <div class="lf timeDiv">
          <span>{{info.uploadTime}}</span>
        </div>
        <div class="lf viewDiv">
          <i class="el-icon-s-custom lf"></i>
          <span class="lf">{{info.pageViews}}</span>
        </div>
      </div>
    </div>

    <div class="vTop">
      <!--视频左侧-->
      <video id='videL' controls="controls" autoplay :src="$store.state.prefixImg + chapterFileUrl"></video>
      <!--<video autoplay id="videL" :src="$store.state.prefixImg + chapterFileUrl" controls="controls"></video>-->
      <!--课时展示右侧-->
      <div class="class-hour-display">
        <div class="display-tit">{{info.courseName}}</div>
        <div class="lecturer">讲师：{{teacherName}}</div>
        <ul>
          <li @click="upLodeCharp(item,index)" v-for="(item,index) in chapterList" :key="index" :style="{opacity: item.type == 1?'0.5':'0.7'}">
            <img src="@/assets/images/class/play.png" alt="" v-if="indexNow != index">
            <img src="@/assets/images/class/playing.png" alt="" v-else>
            <div class="class-hour" :style="{color: indexNow != index?'#fff':'#22944E'}">
              <div class="li-top ccsl">第{{index+1}}章：{{item.name}}</div>
              <div class="li-b" v-if="indexNow == index">正在观看</div>
              <div class="li-b" v-else-if="item.type==1">已学完</div>
              <div class="li-b" v-else>未学</div>
            </div>
          </li>
        </ul>
      </div>
    </div>


    <!--左侧课程介绍、互动区-->
    <div class="lf leftPart">
      <div class="liveIntroduction">
        <div class="titleDiv">
          <p>课程介绍</p>
        </div>
        <div class="contentDiv">
          {{info.courseInfo}}
        </div>
      </div>
      <div class="interactionArea">
        <div class="titleDiv">
          <p>课堂记录</p>
        </div>
        <div class="contentDiv">
          <div class="inputDiv">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入您的笔记"
              v-model="textarea">
            </el-input>
            <el-button class="myBtn" type="primary" @click="getNote">提交笔记</el-button>
          </div>
          <!--笔记记录-->
          <div class="discussAndReplyDiv">
            <template v-for="(item,index) in noteList">
              <div class="itemDiv clearFloat" :key="index">
                <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="lf"></el-avatar>
                <div class="lf">
                  <div class="discussBox">
                    <p class="commonNameP">{{item.chapterName}}</p>
                    <p class="commonContentP" v-if="!noteChangeShow">{{item.note}}</p>
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="请修改您的笔记"
                      v-model="note"
                      style="margin-bottom: 20px"
                      v-if="noteChangeShow&&noteChangeId==item.id">
                    </el-input>
                    <div class="clearFloat commonTimeDiv">
                      <span class="lf">{{item.createTime}}</span>
                      <div class="lf" v-if="!noteChangeShow" @click="note=item.note,noteChangeShow=true,noteChangeId=item.id">修改笔记</div>
                      <div class="lf" style="margin-right: 20px" v-if="noteChangeShow&&noteChangeId==item.id" @click="changeNote(item)">确定修改</div>
                      <div class="lf" v-if="noteChangeShow&&noteChangeId==item.id" @click="note='',noteChangeShow=false,noteChangeId=''">取消修改</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="lineDiv" :style="{marginBottom:index!=noteList.length-1?'36px':'8px'}"></div>
            </template>
          </div>
          <!--底部按钮-->
          <div class="bottomDiv clearFloat">
            <div class="rf">
              <p class="lf">已加载完此课堂全部笔记</p>
              <!--<el-button class="ljplBtn lf">去写笔记</el-button>-->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--验证-->
    <divIdentifyingCode :codeShow="codeShow" @closeShow="closeShow"></divIdentifyingCode>
  </div>
</template>

<script>
  import { formatDate ,getPageViews,updateEachPeriods,insertIntegrals} from '@/utils'
  import divIdentifyingCode from '../../components/divIdentifyingCode'
  import {queryCourseOne,queryUser,queryCourseNote,
    courseNoteInsert,queryWatch,updatePageViews,
    insertWatch,updateWatch,courseNoteUpdate} from '@/request/api'
  export default {
      components: {
        divIdentifyingCode
      },
    name: 'noticeInfo',
    data () {
      return {
        codeShow: false,//查看进度弹窗
        info: {},//课程详情
        chapterList: [],//章节详情
        teacherName: '',//正在观看的章节讲师
        chapterFileUrl: '',//正在观看的章节视频地址
        indexNow: 0,//正在看的是第几章的角标
        section: 0,//正在观看的此视频的进度
        type:'',//正在观看的此视频是否看完

//        关于笔记
        noteList: [],//笔记列表,
        textarea: '',//新增的笔记
        noteChangeShow: '',
        noteChangeId: '',
        note: ''
      }
    },
    watch: {
      chapterFileUrl() {
          this.videoEvent()
      },
    },
    created() {
      this.getList()
      this.getNoteList()
    },
    methods: {
//          获取课程
      getList() {
        const loading = this.openLoading();
        queryCourseOne(this.$route.params.id).then(res=> {
          loading.close();
          if(res.code == 200) {
            this.info = res.data
            if(this.info.chapterName) {
              var arr1 = this.info.chapterName.split(',')
              var arr2 = this.info.chapterTeacherName.split(',')
              var arr3 = this.info.chapterId.split(',')
              var arr4 = this.info.chapterFileUrl.split(',')
              var arr5 = this.info.chapterPeriod.split(',')
            }else if(this.info.chapterFileName) {
              var arr1 = this.info.chapterFileName.split(',')
              var arr2 = this.info.chapterTeacherName.split(',')
              var arr3 = this.info.chapterId.split(',')
              var arr4 = this.info.chapterFileUrl.split(',')
              var arr5 = this.info.chapterPeriod.split(',')
            }
            arr1.forEach(item => {
              this.chapterList.push({
                name:item,
                type:0
              })
            });
            this.chapterList.forEach((item,index)=> {
              item.teacherName = arr2[index]
              item.chapterId = arr3[index]
              item.chapterFileUrl = arr4[index]
              item.period = arr5[index]
            })
            this.getWatch()
          }else {
            this.$message({
              message: res.msg,
              type: 'warning',
              offset: '500'
            });
          }
        }).catch(() => {
          loading.close();
        })
      },
//      获取上次观看记录和是否已观看
      getWatch() {
        const loading = this.openLoading();
        var breaks = false
        this.chapterList.forEach((item,index)=> {
            if(breaks == false) {
              var params = {
                "chapterId": item.chapterId,
                "companyUserId": JSON.parse(localStorage.getItem('userInfo')).id,
                "courseId": this.$route.params.id,
                "id": '',
                "section": "",
                "type": ''
              }
              queryWatch(params).then(res=> {
                if(res.code == 200) {
                  if (res.data.length == 0) {
                    this.indexNow = 0
                    this.teacherName = item.teacherName
                    this.chapterFileUrl = item.chapterFileUrl
                    this.type = 0//0：未看完，1：已看完
                    this.section = 0
                    breaks = true
//            第一次看需要新增记录，之后只需要更新
                    this.addView(item.chapterId)
                  } else {
                      if (index > res.data.length-1) {
                        item.section = 0//观看时间
                        item.sectionId = ''//记录id
                        item.type = 0//0：未看完，1：已看完
                      } else {
                        if(res.data[index].section!=null) {
                          item.section = Number(res.data[index].section.split(",")[1])//观看时间
                        }else {
                          item.section = 0
                        }
                        item.sectionId = res.data[index].id//记录id
                        item.type = res.data[index].type//0：未看完，1：已看完
                      }
                    this.indexNow = res.data.length - 1
                    this.teacherName = this.chapterList[this.indexNow].teacherName
                    this.chapterFileUrl = this.chapterList[this.indexNow].chapterFileUrl
                    this.section = this.chapterList[this.indexNow].section
                    this.type = this.chapterList[this.indexNow].type
                    if(this.chapterFileUrl==''||this.chapterFileUrl==null) {
                      this.$message({
                        message: '播放源错误！',
                        type: 'warning',
                        offset: '500'
                      });
                    }else {
                      document.getElementById('videL').currenttime = this.section
                    }
                  }
                }
                loading.close();
              }).catch((e) => {
                console.log(e);
                loading.close();
              })
            }
        })
      },
//      自动开关视频
      closeShow() {
        this.codeShow = false
        var videL = document.getElementById('videL');
        if (videL.paused) {
          videL.play();
        } else {
          videL.pause();
        }
      },
//      记录学习进度新增
      addView(id) {
          var params = {
            "chapterId":id,
            "companyUserId":JSON.parse(localStorage.getItem('userInfo')).id,
            "courseId": this.$route.params.id,
            "id": '',
            "section": this.indexNow + ',0',
            "type": 0,//0：未看完，1：已看完
          }
          insertWatch(params).then(res=> {
            if(res.code == 200) {
//                this.getWatch()
            }
          }).catch(() => {

          })
      },
      // 记录学习进度更新
      uplodeView(callback) {
          if(this.chapterList[this.indexNow].type == 1) {
            this.type = 1
          }
        var params = {
          "chapterId":this.chapterList[this.indexNow].chapterId,
          "companyUserId": JSON.parse(localStorage.getItem('userInfo')).id,
          "courseId": this.$route.params.id,
          "id": this.chapterList[this.indexNow].sectionId,
          "section": this.indexNow + ',' + this.section,
          "type": this.type,//0：未看完，1：已看完
        }
        updateWatch(params).then(res=> {
          if(this.chapterList[this.indexNow].type == 0) {
            //            学时更新
            if(JSON.parse(localStorage.getItem('userInfo')).period != null) {
              var period = Number(JSON.parse(localStorage.getItem('userInfo')).period) + Number(this.chapterList[this.indexNow].period)
              updateEachPeriods(period)
            }else {
              updateEachPeriods(Number(this.chapterList[this.indexNow].period))
            }
          }
//          积分更新，看完最后一个章节且未获取这个的积分
          if(this.indexNow == this.chapterList.length -1 && this.chapterList[this.indexNow].type == 0) {
            if(JSON.parse(localStorage.getItem('userInfo')).integral != null) {
              var period = Number(JSON.parse(localStorage.getItem('userInfo')).integral) + Number(this.info.integral)
              insertIntegrals(period,this.$route.params.id,this.info.courseName,0)
            }else {
              insertIntegrals(Number(this.info.integral),this.$route.params.id,this.info.courseName,0)
            }
          }
          callback()
        }).catch(() => {
          callback()
        })
      },
//      视频播放触发事件
      videoEvent() {
        var that = this
        // 视频当前播放事件发生变化 触发事件
        var video=document.getElementById('videL')
        var last = that.section;
        video.addEventListener("timeupdate",function(){
          that.section = Math.ceil(this.currentTime)//视频当前播放时长
          if(this.currentTime - last > 2) {
            this.currentTime = last;
          } else {
            last = this.currentTime;
          }
//          this.section = timeToMinute(timers);
//          console.log('this.section:' + that.section);
        })
        // 视频结束触发得事件
        video.addEventListener("ended",function(){
          that.type = 1
          that.uplodeView()
        })
      },
//      切换视频
      upLodeCharp(item,index) {
          if(this.type == 1 || this.chapterList[this.indexNow].type == 1) {
              if(this.chapterList[index].type == 1) {
                this.type = 1
                this.indexNow = index
                this.teacherName = item.teacherName
                this.chapterFileUrl=item.chapterFileUrl
              }else {
                this.type = 0
                this.indexNow = index
                this.teacherName = item.teacherName
                this.chapterFileUrl=item.chapterFileUrl
                this.addView()
              }
            if(this.chapterFileUrl==''||this.chapterFileUrl==null) {
              this.$message({
                message: '播放源错误！',
                type: 'warning',
                offset: '300'
              });
            }
          }else {
            this.$message({
              message: '请按章节顺序进行学习',
              type: 'warning',
              offset: '500'
            });
          }
      },

      //      获取笔记
      getNoteList() {
        const loading = this.openLoading();
        var params = {
          "chapterId": "",
          "companyUserId": JSON.parse(localStorage.getItem('userInfo')).id,
          "courseId": this.$route.params.id,
          "createTime": "",
          "id": '',
          "note": ""
        }
        queryCourseNote(params).then(res=> {
          loading.close();
          if(res.code == 200) {
            this.noteList = res.data
          }else {
            this.$message({
              message: res.msg,
              type: 'warning',
              offset: '500'
            });
          }
        }).catch(() => {
          loading.close();
        })
      },
      //      写笔记
      getNote() {
        if(this.textarea != '') {
          const loading = this.openLoading();
          var params = {
            "chapterId": this.chapterList[this.indexNow].chapterId,
            "companyUserId": JSON.parse(localStorage.getItem('userInfo')).id,
            "id": '',
            "note": this.textarea,
            courseId: this.$route.params.id,
          }
          courseNoteInsert(params).then(res=> {
            loading.close();
            if(res.code == 200) {
              this.$message({
                message: '提交成功',
                type: 'success',
                offset: '500'
              });
              this.textarea = ''
              this.getNoteList()
            }else {
              this.$message({
                message: res.msg,
                type: 'warning',
                offset: '500'
              });
            }
          }).catch(() => {
            loading.close();
          })
        }else {
          this.$message({
            message: '请输入笔记',
            type: 'warning',
            offset: '500'
          });
        }
      },
//      修改笔记
      changeNote(item) {
        if(this.note != '') {
          const loading = this.openLoading();
          var params = {
            "chapterId": item.chapterId,
            "companyUserId": item.companyUserId,
            "id": item.id,
            "note": this.note
          }
          courseNoteUpdate(params).then(res => {
            loading.close();
            if (res.code == 200) {
              this.$message({
                message: '修改成功',
                type: 'success',
                offset: '500'
              });
              this.note = ''
              this.noteChangeShow = false
              this.noteChangeId = ''
              this.getNoteList()
            } else {
              this.$message({
                message: res.msg,
                type: 'warning',
                offset: '500'
              });
            }
          }).catch(() => {
            loading.close();
          })
        }else {
          this.$message({
            message: '笔记不能为空',
            type: 'warning',
            offset: '500'
          });
        }
      }
    },
    mounted() {
//       setTimeout(res=>{
//        this.closeShow()
//         this.codeShow = true
//       },4000)


//      1分钟后课程浏览量加一
      setTimeout(e=> {
        getPageViews(this.info,0)
      },60000)
    },
//    离开当前路由前记录学习进度
    beforeRouteLeave(to, form, next) {
      this.uplodeView(function(){
        next()
      });
    }
  }
</script>

<style scoped>
  #noticeInfo {
    padding-top:30px;
    box-sizing: border-box;
  }
  .vTop {
    position: relative;
    width: 100%;
    height: 576px;
    margin-bottom: 40px;
    background: #333
  }
  video {
    width: 900px;
    height: 576px;
    display: inline-block;
    position: absolute;
    top:0;
    left: 0;
  }
  .class-hour-display {
    display: inline-block;
    width: 300px;
    height: 576px;
    position: absolute;
    top:0;
    right: 0;
    font-size: 0;
    padding: 30px 20px 20px 20px;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
  }
  .class-hour-display .display-tit {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
  }
  .class-hour-display .lecturer {
    opacity: 0.6;
    font-size: 16px;
    margin-bottom: 18px;
  }
  .class-hour-display ul {
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 0 20px 0;
    width: 118%;
    font-size: 16px;
    height: 488px;
    box-sizing: border-box;
  }
  .class-hour-display ul li {
    margin-bottom: 22px;
    list-style-type:none;
  }
  .class-hour-display ul li img {
    width: 24px;
    height: 24px;
    vertical-align: top;
    margin-right: 10px;
  }
  .class-hour-display ul li .class-hour {
    vertical-align: top;
    display: inline-block;
    width: 212px;
  }
  .li-top {
    margin-bottom: 5px;
  }
  .li-b {
    font-size: 14px;
  }
  /*p {
    text-indent: 2em;
  }*/
  .curriculum-bottom {
    font-size: 16px;
    color: #8a8a8a;
  }
  .curriculum-bottom img {
    width: 15px;
    height: 15px;
  }

  .breadcrumbBox{
    margin-bottom:12px;
  }
  .breadcrumbBox div,.breadcrumbBox /deep/ .el-breadcrumb__inner{
    color:#999;
    font-size:16px;
    font-weight:normal;
    line-height: 20px;
  }
  .breadcrumbBox /deep/ .el-breadcrumb__separator[class*=icon]{
    margin:0;
  }

  p{
    margin:0;
  }
  .titleBox p{
    font-size: 32px;
    font-weight: bold;
    color: #333333;
    margin-bottom:36px;
  }
  .otherList{
    width:100%;
    height:22px;
    margin-bottom:35px;
  }
  .otherList span{
    line-height:22px;
    font-size: 16px;
    color:#999;
  }
  .coinDiv,.coinDiv span{
    color: #22944E;
  }
  .coinDiv span,.viewDiv span{
    margin-left:20px;
  }
  .coinDiv /deep/ .el-icon-coin,.viewDiv /deep/ .el-icon-s-custom{
    position: relative;
    top: 1px;
    font-size: 18px;
  }
  .viewDiv /deep/ .el-icon-s-custom{
    color:#999;
  }
  .timeDiv{
    position: relative;
    padding: 0 29px;
    margin:0 29px;
  }
  .timeDiv:before,.timeDiv:after{
    content:"";
    position: absolute;
    width:1px;
    height:15px;
    background:#999;
    top:3px;
  }
  .timeDiv:before{
    left:0;
  }
  .timeDiv:after{
    right:0;
  }

  .leftPart{
    width:100%;
    margin-right:20px;
  }
  .leftPart .liveIntroduction{
    width:100%;
    min-height:270px;
    box-shadow: 0 0 12px 0 rgba(78, 99, 86, 0.2);
    margin-bottom:20px;
  }
  .leftPart .liveIntroduction .contentDiv{
    padding:39px 30px 0 30px;
    box-sizing: border-box;
    font-size:16px;
    color:#666;
    line-height: 30px;
  }
  .leftPart .interactionArea{
    width: 100%;
    background: #FFF;
    box-shadow: 0 0 12px 0 rgba(78, 99, 86, 0.2);
    margin-bottom:60px;
  }
  .leftPart .interactionArea .contentDiv{
    padding:30px 30px 0 30px;
    box-sizing: border-box;
  }
  .leftPart .interactionArea /deep/ .el-textarea__inner{
    resize: none;
    background: #F7F8FA;
    border: 1px solid #E5E5E5;
  }
  .leftPart .interactionArea .myBtn{
    width:160px;
    height:52px;
    margin: 20px auto 0;
    background: #22944E;
    border-color: #22944E;
    font-size: 16px;
    font-weight: 700;
  }
  .leftPart .interactionArea .inputDiv{
    margin-bottom:46px;
  }
  .rightPart{
    width:280px;
    height:351px;
    box-shadow: 0 0 12px 0 rgba(78, 99, 86, 0.2);
  }
  .titleDiv{
    width:100%;
    height:80px;
    border-bottom:1px solid #E5E5E5;
  }
  .titleDiv p{
    font-size:24px;
    color:#333;
    font-weight: bold;
    height:80px;
    line-height:80px;
    padding-left:54px;
    box-sizing: border-box;
    position: relative;
  }
  .titleDiv p:before{
    content: "";
    position: absolute;
    width: 4px;
    height: 28px;
    background: #22944E;
    top: 25px;
    left: 20px;
  }
  .rightPart .contentDiv{
    text-align: center;
  }
  .imgDiv{
    margin:20px 0;
  }
  .imgDiv p{
    margin-top:20px;
    font-size: 20px;
  }
  .txtP{
    font-size: 16px;
    font-weight: 400;
    color: #666666;
    line-height: 30px;
    padding:0 42px 0 30px;
    box-sizing: border-box;
    text-align: left;
  }

  .discussAndReplyDiv /deep/ .el-avatar,.replyBox /deep/ .el-avatar{
    margin-right:16px;
  }
  .discussAndReplyDiv .itemDiv>div,.replyBox>div{
    width:calc( 100% - 56px );
  }
  .lineDiv{
    width: 100%;
    height: 1px;
    background: #E5E5E5;
    position: relative;
    left:-30px;
    margin:20px 0 36px 0;
  }
  .commonNameP{
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    margin-bottom:16px;
  }
  .commonContentP{
    font-size: 16px;
    color: #666666;
    margin-bottom:16px;
  }
  .commonTimeDiv span,.commonTimeDiv div{
    font-size: 14px;
    line-height: 14px;
  }
  .commonTimeDiv span{
    color: #999;
    margin-right:40px;
  }
  .commonTimeDiv div{
    color: #22944E;
    cursor:pointer;
  }
  .replyBox{
    margin:24px 0 0 0;
  }
  .txtSpan{
    font-size:18px;
    color:#999;
    margin:0 8px;
  }
  .bottomDiv p{
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    line-height:36px;
    margin-bottom:8px;
  }
  .ljplBtn{
    margin-left:12px;
    width:88px;
    height:36px;
    padding:0;
    color: #22944E;
    border: 1px solid #22944E;
  }
</style>
